<template>
  <div>
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group> -->

    <!--  router 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
    <el-menu
      router
      default-active="1-1"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
    >
      <el-submenu
        :index="'/' + firstItem.path"
        v-for="(firstItem, i) in menuList"
        :key="i"
      >
        <!-- 第一层 标题导航 -->
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ firstItem.authName }}</span>
        </template>
        <!-- 第二层 标题导航 -->
        <el-menu-item
          :index="'/' + secondItem.path"
          class="itemLi"
          v-for="(secondItem, j) in firstItem.children"
          :key="j"
        >
          <i class="el-icon-menu"></i>
          <span>{{ secondItem.authName }}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { getMenus } from "../api/index";
export default {
  data() {
    return {
      isCollapse: false,
      menuList: [],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 获取左侧菜单列表
    async initGetMenus() {
      let {
        data,
        meta: { status },
      } = await getMenus();
      if (status != 200) return this.$message.error("请求失败");
      this.menuList = data;
    },
  },
  created() {
    this.initGetMenus();
  },
};
</script>

<style scoped lang='less'>
.el-menu {
  box-sizing: border-box;
}
// /deep/  >>>  vue 中的样式穿透   sass 只支持 /deep/
// .el-menu  .itemLi {
//  padding-left: 80px;
//   }

.el-menu .itemLi {
  padding-left: 80px !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>